<template>
	<view class="page-inspection-record">
		<!-- 页面标题栏 -->
		<!-- <view class="page-header">
			<u-navbar title="巡检记录" :auto-back="true" :border-bottom="false" bg-color="#ffffff"></u-navbar>
		</view> -->

		<!-- 巡检记录列表 -->
		<view class="inspection-list">
			<view class="inspection-card" v-for="(record, index) in inspectionRecords" :key="record.id">
				<!-- 卡片头部 -->
				<view class="card-header">
					<text class="task-title">{{ record.taskTitle }}</text>
					<text class="inspector-info">巡检人：{{ record.inspector }}</text>
				</view>

				<!-- 被巡检人信息 -->
				<view class="person-info">
					<view class="info-row">
						<view class="info-item">
							<text class="info-label">姓名</text>
							<text class="info-value">{{ record.personName }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">性别</text>
							<text class="info-value">{{ record.gender }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">年级</text>
							<text class="info-value">{{ record.age }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">巡检时间</text>
							<text class="info-value">{{ record.inspectionTime }}</text>
						</view>
					</view>
				</view>

				<!-- 巡检描述 -->
				<view class="inspection-description">
					<text class="description-label">巡检描述：</text>
					<text class="description-content">{{ record.description }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			inspectionRecords: [
				{
					id: 1,
					taskTitle: '巡检任务1',
					inspector: '王大锤',
					personName: '陶玉成',
					gender: '男',
					age: '48',
					inspectionTime: '7-23 16:27',
					description: '张奶奶需要服用降压药，需要专人陪护注意老人心态（每日2次，每次1片）'
				},
				{
					id: 2,
					taskTitle: '巡检任务1',
					inspector: '王大锤',
					personName: '陶玉成',
					gender: '男',
					age: '48',
					inspectionTime: '7-23 16:27',
					description: '张奶奶需要服用降压药，需要专人陪护注意老人心态（每日2次，每次1片）'
				},
				{
					id: 3,
					taskTitle: '巡检任务1',
					inspector: '王大锤',
					personName: '陶玉成',
					gender: '男',
					age: '48',
					inspectionTime: '7-23 16:27',
					description: '张奶奶需要服用降压药，需要专人陪护注意老人心态（每日2次，每次1片）'
				},
				{
					id: 4,
					taskTitle: '巡检任务1',
					inspector: '王大锤',
					personName: '陶玉成',
					gender: '男',
					age: '48',
					inspectionTime: '7-23 16:27',
					description: '张奶奶需要服用降压药，需要专人陪护注意老人心态（每日2次，每次1片）'
				}
			]
		}
	},
	onLoad() {
		// 页面加载时可以从API获取巡检记录数据
	},
	methods: {
		// 可以添加其他方法，比如刷新数据、查看详情等
	}
}
</script>

<style lang="scss" scoped>
.page-inspection-record {
	min-height: 100vh;
	background: #F8F8F8;
}

.page-header {
	background: #ffffff;
	border-bottom: 1rpx solid #E5E5E5;
}

.inspection-list {
	padding: 20rpx 16rpx;
}

.inspection-card {
	background: #FFFFFF;
	border-radius: 12rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	border: 1rpx solid #F0F0F0;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
	padding-bottom: 16rpx;
	border-bottom: 1rpx solid #F5F5F5;
}

.task-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.inspector-info {
	font-size: 26rpx;
	color: #666666;
	background: #F8F8F8;
	padding: 8rpx 16rpx;
	border-radius: 8rpx;
}

.person-info {
	margin-bottom: 20rpx;
}

.info-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.info-item {
	display: flex;
	align-items: center;
	min-width: 160rpx;
	margin-bottom: 12rpx;
}

.info-label {
	font-size: 26rpx;
	color: #999999;
	margin-right: 16rpx;
	min-width: 80rpx;
}

.info-value {
	font-size: 26rpx;
	color: #333333;
	font-weight: 500;
}

.inspection-description {
	background: #F8F9FA;
	padding: 20rpx;
	border-radius: 8rpx;
	border-left: 4rpx solid #FF7D00;
}

.description-label {
	font-size: 26rpx;
	color: #666666;
	font-weight: bold;
	margin-bottom: 8rpx;
}

.description-content {
	font-size: 26rpx;
	color: #333333;
	line-height: 1.6;
	text-indent: 2em;
}
</style> 